<template>
    <div class="mark_box">
        <div class="mark_left">
            <div class="left_head">编辑区</div>
            <div class="left_title">
                <input type="text" class="left_input" @input="getInput($event)">
            </div>
            <div class="left_content">
                <textarea @input="getTextarea($event)" id="context"></textarea>
            </div>
            <div class="left_classify">
                <input type="text" class="left_input" @input="getClassIfy($event)">
            </div>
        </div>
        <div class="mark_right">
            <div class="right_head">预览区</div>
            <div class="right_title">
                {{getTitle}}
            </div>
            <div class="right_content">
                <MarkContext></MarkContext>
            </div>
        </div>
        <div class="btn_box">
            <button class="btn" type="button" @click="submit_btn_1">提交</button>
        </div>
    </div>
</template>

<script>
import MarkContext from './markContext.vue'
import {mapActions,mapGetters} from 'vuex'
export default {
    name : 'MarkDown',
    components : {
        MarkContext
    },
    computed : {
        ...mapGetters(['getTitle' , "getContext"])
    },
    methods : {
        ...mapActions(["get_input","submit_btn" , "get_textarea" , "get_classify"]),
        getInput : function(e){
            var input = e.target.value
            this.get_input(input)
        },
        getTextarea : function(e){
            var textarea = e.target.value
            this.get_textarea(textarea)
        },
        getClassIfy : function(e){
            var classify = e.target.value
            this.get_classify(classify)
        },
        submit_btn_1: function(){
            this.submit_btn()
            this.$router.push('/')
        }
    }
}
</script>

<style>
.mark_box{
    height: 100vh;
    width: 100vw;
    display: flex;
    overflow: hidden;
}
.left_title{
    height: 40px;
    width: 100%;
}
.btn_box{
    position: fixed;
    bottom: 3em;
    right: 3em;
}
.btn_box .btn{
    height: 40px;
    width: 100px;
    background-color: #eee;
}

.right_title{
    text-indent: center;
    line-height: 40px;
    height: 40px;
    text-indent: 10px;
    border-bottom: 1px solid #e3e3e3;
}
.right_content{
    padding: 1em;
    font-size: 1em;
    flex-grow: 1;
    overflow-y: scroll;
}
.left_content{
    display: flex;
    flex-grow: 1;
    padding: 1em;
}
.left_content textarea{
    outline: none;
    flex-grow: 1;
    border: none;
    font-size: 0.7em;
    font-family: "黑体";
}
.left_title input{
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    text-indent: 10px;
    font-size: 1em;
    border-bottom: 1px solid #e3e3e3;
}
.left_classify{
    height: 40px;
}
.left_classify input {
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    text-indent: 10px;
    font-size: 1em;
    border-top: 1px solid #e3e3e3;
}
.mark_left{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction:column;
    border-right: 1px solid #e3e3e3;
}
.mark_right{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.left_head{
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #e3e3e3;
    text-align: center;
    line-height: 50px;
}
.right_head{
    height: 50px;
    text-align: center;
    line-height: 50px;
    width: 100%;
    border-bottom: 1px solid #e3e3e3;
}
</style>